<template>
      <div class="lrc-big">
        <div class="lrc-big-item">
         <img   :class="showLrc==false?'img':'img move' " src="@/assets/img/MusicDetailCard/needle.png" style="width:80px;height:80px;">
         <div style="width:220px;height:220px;border-radius:50%;background-color:black;display:flex;align-items:center;justify-content:center;">
           <div style="width:160px;height:160px;border-radius:50%;background-color:#fff;">
              <img style="width:100%;height:100%;border-radius:50%" :src="MusicUrl.img" alt="">
           </div>
         </div>
        </div>
        <div style="overflow:hidden;position:relative;width:400px;height:300px;margin-top:60px;overflow-y:scroll; ">
           <div class="lrc-word" ref="lrcbox">
            
           <p  style="padding:5px 0" :class="{lrcColor:times>=keyArr[i]&&times<keyArr[i+1]}" v-for="(item,key,i) in klyric" :key="i">{{item}}{{scrollLrc(i)}}</p>
           </div>
        </div>
      </div>
</template>

<script>
var num;
export default {
   computed:{
       showLrc(){
        return this.$Store.state.homePage.showLrc
     },
      MusicUrl(){
        return this.$Store.state.homePage.MusicUrl
     }
   },
   data(){
     return {
        moveShow:false,
        klyric:{},
        times:"",
        keyArr:[]
     }
   },
   methods:{
     moveImg(){
       console.log("大意了")
       this.moveShow=!this.moveShow
     },
     async getLrc(){
       const {data:res} =await this.$request("/lyric",{
         id:this.MusicUrl.id
       })
       console.log(res)
       if(res.code!=200) return
        this.handleLrc(res.lrc.lyric)
     },
     scrollLrc(index){
       if(this.times>this.keyArr[index]&&this.times<this.keyArr[index+1]){
           this.$refs.lrcbox.style.top=-((index-5)*30)+"px"
  this.$refs.lrcbox.style.transition='all 0.5s';
  }
     },
     handleLrc(value){
       if(!value) return
        var lyrics=value.split("\n");
        var lrc={}
        var reg=/\[\d*:\d*(\.|:)\d*]/g;
        for(var i=0;i<lyrics.length;i++){
          var timeReArr=lyrics[i].match(reg);  //将时间分割Array [ "[00:00.000]" ]
          if(!timeReArr) continue; 
          var content=lyrics[i].replace(timeReArr,"");   //作词 : 葛佳慧
          // console.log(content)
          var t=timeReArr[0]; //获取 [00:01.000]
          var min=parseInt(t.match(/\[\d*/i).toString().slice(1))
          var sec=parseInt(t.match(/\:\d*/i).toString().slice(1))
         var time=min*60+sec;
          lrc[time]=content
        }
      this.klyric=lrc
       for(var i in this.klyric){
         this.keyArr.push(i)
     }
     }
   },
   mounted(){
     this.getLrc()
     this.$bus.$on("playTime",(val)=>{
       this.times=val
     })
   }
}
</script>

<style lang="less" >
    .lrc-big{
      position:absolute;
      display:flex;
      height:700px;
      justify-content: center;
      width:1600px;
      background-color: #ECEBEC;
        animation-name: example;
        animation-duration: 1s;
        .lrc-big-item{
          width:300px;
          height:300px;
          margin-top:60px;
          .img{
            margin-bottom:-25px;
            margin-left:140px;
            transform-origin:top left;
            transition: all 1s;
            transform:rotateZ(-20deg)
           
          }
        .move{
            transform-origin:top left;
            transition: all 1s;
            transform:rotateZ(22deg)
         }
        }
        .lrc-word{
          width:100%;
          top:0;
          height:800px;
          text-align:center;
          position:absolute;
        }
        .lrcColor{
          color: black;
          font-size:18px;
          font-weight:600;
          transition: all 0.5s;
        }
        
    }
    
    @keyframes example {
  0% {top:700px;background-color:#fff}

  100% {top:0px;background-color: #ECEBEC;}
}
</style>